<template>
	<view class="u-wrap">
		<view class="status"></view>
		<view class="nav">
			<view class="left" @click="toBack()">
				<image src="../../static/image/back.png" />
			</view>
			<view class="center">员工管理</view>
			<view class="right">
				<image src="../../static/image/7a6c14529f55e7906092a378d697bd4.png" />
			</view>
		</view>
		<view class="xiabygl">
			<view class="arrange_list_imaeg" v-if="StaffSchedulingData.length==0">
				<image src="../../static/image/empty.png" />
				<view class="wenzi">暂时没有数据哦</view>
			</view>
			<view class="yglieb" v-for="(item,index) in StaffSchedulingData" :key="index">
				<view class="ygxinx">
					<view :class="item.sex==0?'nan':'nv'"></view>
					<view class="ygzhil">
						<view class="sahngbu">
							<image class="ygtoux" v-if="item.touxiang==null" src="../../static/avatar.jpg"
								mode="aspectFill"></image>
							<image class="ygtoux" v-else :src="imgUrl+item.touxiang" mode="aspectFill"></image>
							<view class="yuangxinx">
								<view>{{item.name==null?'李晓明':item.name}}</view>
								<view class="yuangzw">
									<view>
										{{item.role==1?'理发师':item.role==2?'门店':item.role==3?'区域经理':item.role==4?'城市经理':item.role==5?'老板':'未知'}}
									</view>
								</view>
							</view>
						</view>
						<view class="yuangjind">
							<view class="jindut" :style="{'width':item.jindu}"></view>
						</view>
					</view>
				</view>
				<view class="caozuo">
					<image class="cctybia" src="../../static/dianh.png"></image>
					<image class="cctybia" src="../../static/yhbianj.png"></image>
				</view>
			</view>
		</view>
	<!-- 	<view class="addbank" @click="toAddTasks()">
			添加员工
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StaffSchedulingData: [],
				yg_id: '',
				user: null,
				sex: '',
				name: '',
				touxiang: '',
				dqjs: '',
				mendian_id: '',


			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: 'user_key',
				complete: function(res) {
					// console.log(666,res)
					that.yg_id = res.data.id;
					that.user = res.data;
					that.sex = res.data.sex;
					that.name = res.data.name;
					that.touxiang = res.data.touxiang;
					that.dqjs = res.data.role;
					that.mendian_id = res.data.mendian;
					that.getPersonData(that.yg_id);
				}
			})
		},
		methods: {
			toBack(){
				uni.navigateBack({
					delta:1
				})
			},
			//获取管理名下员工数据
			getPersonData(id) {
				let _that = this;
				wx.request({
					url: getApp().globalData.url + '/client/GetMxus',
					method: 'GET',
					data: {
						id: id
					},
					header: {
						"Content-Type": "application/json"
					},
					success: function(res) {
						console.log(555, res)
						if (res.data.code == 200 && res.data.msg == '查询成功') {
							_that.StaffSchedulingData = res.data.data
						} else {
							uni.showToast({
								icon: 'none',
								position: 'center',
								title: "请求出现异常！"
							});
						}
					}
				})
			},
			//新增任务
			toAddTasks() {
				uni.navigateTo({
					url: '../addTasks/addTasks'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F0F0F0;
		height: auto;
		min-height: 100%;
	}
</style>
<style scoped lang="scss">
	.u-wrap {
		text-align: center;
		align-items: center;

		.status {
			height: var(--status-bar-height);
			background-color: #1BB68E;

		}

		.nav {
			display: flex;
			justify-content: space-between;
			height: 73rpx;
			background-color: #1BB68E;

			.left {
				width: 33%;
				height: 73rpx;
				text-align: left;
				align-items: center;

				image {
					width: 20rpx;
					height: 33rpx;
					margin-left: 29rpx;
					margin-top: 20rpx;

				}
			}

			.center {
				width: 33%;
				align-items: center;
				height: 73rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				line-height: 73rpx;

			}

			.right {
				width: 33%;
				height: 73rpx;
				text-align: right;
				margin-right: 30rpx;

				image {
					width: 12rpx;
					height: 34rpx;
					margin-top: 30rpx;
				}
			}
		}

		.xiabygl {
			width: 690rpx;
			padding: 30rpx;
			padding-top: 40rpx;

			.yglieb {
				background: #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				border: 1rpx solid #D3D3D3;

				.caozuo {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 150rpx;
					margin-right: 20rpx;

					.cctybia {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.ygxinx {
					display: flex;
					align-items: center;
					width: 500rpx;

					.nan {
						width: 20rpx;
						height: 140rpx;
						background: #007AFF;
						margin-right: 20rpx;
						border-radius: 20rpx 0 0 20rpx;
					}

					.nv {
						width: 20rpx;
						height: 140rpx;
						background: #ff007f;
						margin-right: 20rpx;
						border-radius: 20rpx 0 0 20rpx;
					}

					.ygzhil {
						font-size: 28rpx;

						.yuangjind {
							height: 15rpx;
							background: #c8ccd4;
							border-radius: 8rpx;

							.jindut {
								height: 15rpx;
								border-radius: 8rpx;
								background: #2B85E4;
							}
						}

						.sahngbu {
							display: flex;
							align-items: center;
							margin-bottom: 15rpx;

							.ygtoux {
								width: 80rpx;
								height: 80rpx;
								border-radius: 40rpx;
							}

							.yuangxinx {
								margin-left: 10rpx;

								.yuangzw {
									display: flex;
									align-items: center;
									font-size: 25rpx;
									color: #2979FF;

									.zhib {
										padding: 5rpx 20rpx;
										font-size: 25rpx;
										background: #ff007f;
										border-radius: 20rpx;
										color: #ffffff;
										margin-left: 10rpx;

									}

									.xiuxi {
										padding: 5rpx 20rpx;
										font-size: 25rpx;
										background: #d0d0d0;
										border-radius: 20rpx;
										color: #838383;
										margin-left: 10rpx;

									}
								}
							}
						}
					}
				}
			}
		}

		.addbank {
			height: 100rpx;
			border-radius: 50rpx;
			color: #FFFFFF;
			font-size: 36rpx;
			background-color: #36D28E;
			line-height: 100rpx;
			position: fixed;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto 41rpx 100rpx 40rpx;
		}
	}
</style>
